<ng-template #template>
  <div [class]="model.getRootCss()" (keydown)="model.tryToZoom($event, $event)" (mouseover)="activateZoom()"
    (mouseout)="deactivateZoom()">
    <div *ngIf="model.hasFrame" class="svd-simulator-wrapper" id="svd-simulator-wrapper"
      [style.width]="simulatorFrame.frameWidth + 'px'" [style.height]="simulatorFrame.frameHeight + 'px'">
      <div class="svd-simulator" [style.width]="simulatorFrame.deviceWidth + 'px'"
        [style.height]="simulatorFrame.deviceHeight + 'px'"
        [style.transform]="'scale(' + simulatorFrame.scale + ') translate(-50%, -50%)'">
        <div class="svd-simulator-content">
          <ng-template [component]="{ name: 'survey-widget', data: { model: model.survey } }"></ng-template>
        </div>
      </div>
    </div>
    <div *ngIf="!model.hasFrame" class="svd-simulator-content">
      <ng-template [component]="{ name: 'survey-widget', data: { model: model.survey } }"></ng-template>
    </div>
  </div>
</ng-template>